<template>
    <div class="water-charge">
        <c-wrap title="用水统计">
            <c-cell></c-cell>
            <div class="break"></div>
            <c-instrument ref="instrument" :value="table.year.volumeYear"></c-instrument>
            <div style="background-color: white">
                <mt-cell class="p-cell">
                    <div slot="title">
                        <span style="font-weight: bolder">{{table.yearNum}}年{{table.monthNum}}月</span>
                    </div>
                    <div>账单:
                        <span v-if="table.month" style="color: #48B648">{{table.month.statusTxt}}</span>
                        <span v-else>--</span>
                    </div>
                </mt-cell>
                <table width="100%">
                    <tr>
                        <td @click="click">
                            <p><span v-if="table.month">{{table.month.volume}}</span><span v-else>--</span>m³</p>
                            <p>
                                <icon clazz="icon-shui1"></icon>
                                <span style="line-height: 22px">月水量</span>
                            </p>
                        </td>
                        <td @click="click">
                            <p><span v-if="table.month">{{table.month.price}}</span><span v-else>--</span>元</p>
                            <p>
                                <icon clazz="icon-shoushuiliang"></icon>
                                月水费
                            </p>
                        </td>
                    </tr>
                </table>
                <div class="break"></div>
                <mt-cell class="p-cell">
                    <div slot="title">
                        <span style="font-weight: bolder">{{table.yearNum}}年</span>
                    </div>
                </mt-cell>
                <table width="100%">
                    <tr>
                        <td>
                            <p><span v-if="table.year">{{table.year.volumeYear}}</span><span v-else>--</span>m³</p>
                            <p>
                                <icon clazz="icon-shuifei1"></icon>
                                年水量
                            </p>
                        </td>
                        <td>
                            <p><span v-if="table.year">{{table.year.priceYear}}</span><span v-else></span>元</p>
                            <p>
                                <icon clazz="icon-iclistfeiyong"></icon>
                                年水费
                            </p>
                        </td>
                    </tr>
                </table>
            </div>
        </c-wrap>
    </div>
</template>
<script>
    import CWrap from '../../components/CWrap'
    import CCell from '../../components/CCell'
    import CGauge from '../../components/CGauge'
    import CInstrument from '../../components/CInstrument'

    export default {
        components: {CWrap, CCell, CGauge, CInstrument},
        data() {
            return {
                table: {
                    month: {
                        volume: 0,
                        price: 0,
                        statusTxt: ''
                    },
                    year: {
                        volumeYear: 0,
                        priceYear: 0
                    }
                }
            }
        },
        methods: {
            click() {
                this.$router.push({
                    name: 'terminalDataEcharts',
                    params: {
                        id: this.$route.params.id ? this.$route.params.id : '',
                        month: this.table.date
                    }
                })
            },
            loadData() {
                app.ajax.get(app.config.api.statistics.summary, {}, (res) => {
                    this.table = res.data;
                    let date = this.table.date.split('-');
                    this.table.yearNum = Number(date[0]);
                    this.table.monthNum = Number(date[1]);
                    this.$nextTick(() => {
                        this.$refs['instrument'].init();
                    })
                })
            }
        },
        mounted() {
            this.loadData();
        }
    }
</script>
<style>
    .water-charge td {
        width: 25%;
        border-top: solid 1px gainsboro;
    }

    .water-charge td p {
        margin-right: 0;
        padding-right: 0;
        border-right: solid 1px gainsboro;
    }

    .water-charge td:last-child p {
        border-right: 0;
    }

    .water-charge td p:first-child {
        margin-bottom: 0;
        padding-bottom: 5px;
        font-weight: bolder;
        color: dodgerblue;
    }

    .water-charge td p:last-child {
        margin-top: 0;
        margin-left: 0;
        font-size: 14px;
    }

    .water-charge td .icon {
        width: 20px;
        height: 20px;
        color: sandybrown;
    }
</style>
